<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="2" :offset="0">
          <el-button type="primary" size="default" @click="byidgetlistdata(orderid)">查询</el-button>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-input v-model="orderid" placeholder="输入订单号.." size="normal" clearable @change="changeinput"></el-input>
        </el-col>
      </el-row>
      
    </el-card>

    <el-table :data="listdata" border stripe>
      <el-table-column type="index" prop="col.id" label="序号" :width="80">
      </el-table-column>
      <el-table-column prop="col.id" label="订单号" width="80">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.orderId }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="商品名字" width="width">
        <template slot-scope="{ row, $index }">
          <div class="truncate">
            {{ row.orderName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="商品描述" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.orderDescription }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="总价" width="80">
        <template slot-scope="{ row, $index }">
          <div>
            ¥{{ row.orderSum }}.00
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="col.id" label="收款方" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            {{ row.payee }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <div>
            <el-button
              v-show="row.isSale"
              type="success"
              size="mini"
              icon="el-icon-sort-up"
              circle
              @click="downdatashop(row)"
            ></el-button>
            <el-button
              v-show="!row.isSale"
              type="primary"
              size="mini"
              icon="el-icon-sort-down"
              circle
              @click="updatashop(row)"
            ></el-button>

            <el-button
              type="warning"
              size="mini"
              circle
              icon="el-icon-edit"
              @click="showshopdetail(row)"
            ></el-button>
            <el-button
              type="info"
              size="mini"
              circle
              icon="el-icon-info"
              @click="maintenance(row)"
            ></el-button>
            <el-button
              type="danger"
              size="mini"
              circle
              icon="el-icon-delete"
              @click="deletebut(row)"
            >
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      style="font-size: 30px; color: #000"
      title="账单详情:"
      :visible.sync="drawer"
      :direction="direction"
      size="50%"
      :before-close="handleClose"
    >
      <!-- 名称 -->
      <el-row>
        <el-col :span="5">订单号</el-col>
        <el-col :span="16"> {{ showshopdetaildata.orderid }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商户全称</el-col>
        <el-col :span="16"> 潮悦`家教班有限公司</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品名称</el-col>
        <el-col :span="16"> {{ showshopdetaildata.orderName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品描述</el-col>
        <el-col :span="16"> {{ showshopdetaildata.orderDescription }}</el-col>
      </el-row>
      <!-- //描述 -->
     
      <el-row>
        <el-col :span="5">收款方</el-col>
        <el-col :span="16"> {{ showshopdetaildata.payee }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">交易金额</el-col>
        <el-col :span="16" style="color: #e53e31;">{{ showshopdetaildata.total_amount }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">交易状态</el-col>
        <el-col :span="16" :style=" !this.listdata.state? 'color: #86de74;':'color: #e53e31;'">{{ ispayment }} </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">支付方式</el-col>
        <el-col :span="16"> {{ showshopdetaildata.method }}</el-col>
      </el-row>
      <!-- 价格 -->
      <el-row>
        <el-col :span="5">创建时间</el-col>
        <el-col :span="16"> {{ showshopdetaildata.timestamp }}</el-col>
      </el-row>
     
      <el-row>
        <el-col :span="5">交易单号</el-col>
        <el-col :span="16"> {{ showshopdetaildata.app_id }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商户单号</el-col>
        <el-col :span="16">{{ showshopdetaildata.trade_no }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">账单评价</el-col>
        <el-col :span="16" :style=" !this.listdata.remark? 'color: #86de74;':'color: #e53e31;'">{{ isremark}}</el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      listdata_r: [],
      listdata: [],
      listselect: "",
      isSale: true,
      drawer: false, //抽屉展示与隐藏
      direction: "rtl",
      orderid: "",
      showcontent: "",
      showshopdetaildata:{},
      rules: {
        orderid: {
						rule: /^[0-9]+$/,
						msg: "订单号输入异常.."
					},
        }
    }
  },
  methods: {
    //正则校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					this.$message({
						message: this.rules[key].msg,
            type:"warning"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
    async updatashop(row) {
      row.isSale = 1;
      // let result =await this.$API.sku.onsaveisshop(row.id)
      // if(result.code === 200){
      //   this.$message({type:"success",message:"成功上架"})
      // }
    },
    //下架数据的回调
    async downdatashop(row) {
      row.isSale = 0;
      // let result=await this.$API.sku.downsaveisshop(row.id)
      // if(result.code === 200){
      //   this.$message({type:"warning",message:"已下架商品"})
      // }
    },
    //展开详细详情:
    async showshopdetail(row) {
      this.drawer = true;
      let result = await this.$API.check.getbackdetailorder(row.orderId);
      if(result.code === 200){
        this.showshopdetaildata = result.data[0];
      }
    },
    //开发维护
    maintenance(row) {
      this.$message("开发维护中...");
    },
    //删除按钮的回调
    deletebut(row) {
      this.$message("暂时不支持删除...");
    },
    //获取订单所有数据
    async getlistdata() {
      let result = await this.$API.check.getbackorder();
      if (result.code === 200) {
        this.listdata = result.data;
      }
    },
    //根据id号查询订单数据:
    async byidgetlistdata(orderId){
      if(! this.validate('orderid')){
         this.getlistdata()
        return
      }else{
         let result = await this.$API.check.getbackdetailorder(orderId);
          if(result.code === 200){
            this.listdata = result.data;
          }
      }
     
    },
    //发起修改保存回调
    savecontent() {
      this.$message("开发维护中...");
    },
    //确认关闭？
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    changeinput(value){
    }
   
  },
  mounted() {
    this.getlistdata();
  },
  computed:{
      isremark() {//计算评价:
                    return ! this.listdata.remark? '已评价':'未评价';
                },
      ispayment(){//计算支付状态
        return ! this.listdata.state? '已支付':'未支付';
      }
    }
};
</script>

<style scoped>
.truncate {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 200px; /* 设置宽度 */
}
.el-row .el-col-5{
  font-size: 18px;
  text-align: right;
}
.el-col{
  margin: 10px 10px;
  font-size: 14px;
  align-content: center;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
